<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/swiper-bundle.css">
  <link rel="shortcut icon" href="./images/16.ico" type="image/x-icon" />
  <title>携程在手，说走就走</title>
</head>
<body>
  <!-- 顶部搜索 -->
  <div class="search-index">
    <div class="search">搜索:目的地/酒店/景点/航班号</div>
    <a href="#" class="user">我 的</a>
  </div>
  <!-- 焦点图模块 -->
  <div class="swiper-container">
    <div class="focus swiper-wrapper">
      <div class="swiper-slide">
        <img src="./upload/focus.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./upload/focus2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./upload/focus3.jpg" alt="">
      </div>
    </div>
    <!-- 分页小点 -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- 局部导航栏 -->
  <ul class="local-nav">    
    <li>
      <a href="#" title="攻略·景点">
        <span class="local-nav-icon-icon1"></span>
        <span>攻略·景点</span>
      </a>
    </li>
    <li>
      <a href="#" title="门票·活动">
        <span class="local-nav-icon-icon2"></span>
        <span>门票·活动</span>
      </a>
    </li>
    <li>
      <a href="#" title="美食林">
        <span class="local-nav-icon-icon3"></span>
        <span>美食林</span>
      </a>
    </li>
    <li>
      <a href="#" title="周边游">
        <span class="local-nav-icon-icon4"></span>
        <span>周边游</span>
      </a>
    </li>
    <li>
      <a href="#" title="一日游">
        <span class="local-nav-icon-icon5"></span>
        <span>一日游</span>
      </a>
    </li>
  </ul>

  <!-- 主导航栏 -->
  <nav>
    <div class="nav-common hotel">
      <div class="nav-items">
        <a href="#">酒店</a>
      </div>
      <div class="nav-items">
        <a href="#">海外酒店</a>
        <a href="#">特价酒店</a>
      </div>
      <div class="nav-items">
        <a href="#">团购</a>
        <a href="#">民宿·客栈</a>
      </div>
    </div>
    <div class="nav-common flight">
      <div class="nav-items">
        <a href="#">机票</a>
      </div>
      <div class="nav-items">
        <a href="#">火车票</a>
        <a href="#">特价机票</a>
      </div>
      <div class="nav-items">
        <a href="#">汽车票·船票</a>
        <a href="#">专车·租车</a>
      </div>
    </div>
    <div class="nav-common travel">
      <div class="nav-items">
        <a href="#">旅游</a>
      </div>
      <div class="nav-items">
        <a href="#">门票</a>
        <a href="#">目的地攻略</a>
      </div>
      <div class="nav-items">
        <a href="#">游轮旅行</a>
        <a href="#">定制旅行</a>
      </div>
    </div>
  </nav>
  <!-- 侧导航栏 -->
  <ul class="subnav-entry">
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon1"></span>
        <span>自由行</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon2"></span>
        <span>WiFi电话卡</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon3"></span>
        <span>保险·签证</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon4"></span>
        <span>换购·购物</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon5"></span>
        <span>向导·包车</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon6"></span>
        <span>特价机票</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon7"></span>
        <span>礼品卡</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon8"></span>
        <span>申卡·借钱</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon9"></span>
        <span>社区</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon-icon10"></span>
        <span>更多</span>
      </a>
    </li>
  </ul>
  <!-- 销售模块 -->
  <div class="sales-box">
    <div class="sales-hd">
      <h2>热门活动</h2>
      <a href="#" class="more">获取更多福利</a>
    </div>
    <div class="sales-bd">
      <div class="row">
        <a href="#">
          <img src="upload/pic1.jpg" alt="">
        </a>
        <a href="#">
          <img src="upload/pic2.jpg" alt="">
        </a>
      </div>
      <div class="row">
        <a href="#">
          <img src="upload/pic3.jpg" alt="">
        </a>
        <a href="#">
          <img src="upload/pic4.jpg" alt="">
        </a>
      </div>
      <div class="row">
        <a href="#">
          <img src="upload/pic5.jpg" alt="">
        </a>
        <a href="#">
          <img src="upload/pic6.jpg" alt="">
        </a>
      </div>
    </div>
  </div>
  <!-- 底部导航栏 -->
  <ul class="footer-nav">
    <li>
      <a href="#">
        <span class="footer-icon">
          <svg viewBox="0 0 256 256"><path d="M50.879 37.219a13.62 13.62 0 0 0-2.987.331c-7.23 1.627-11.754 8.724-10.104 15.852 8.524 36.834 31.178 72.785 68.183 107.85 35.42 33.564 67.812 52.591 96.958 57.351.726.118 1.46.178 2.195.178 7.416 0 13.428-5.927 13.428-13.238v-34.41c0-6.011-4.45-11.123-10.477-12.036l-13.606-2.061c-.6-.091-1.213.02-1.74.317l-13.801 7.768c-12.6 7.092-28.335 5.762-39.526-3.34a300.778 300.778 0 0 1-23.277-21.034c-8.074-8.102-15.495-16.477-22.26-25.126-7.274-9.299-9.238-21.612-5.21-32.662l7.585-20.802a2.613 2.613 0 0 0 .06-1.607l-3.858-13.647c-1.618-5.724-6.907-9.684-12.935-9.684H50.879zm0-15.886h28.628c13.26 0 24.896 8.712 28.456 21.305l3.859 13.647c1.046 3.7.9 7.63-.418 11.245l-7.585 20.802a18.321 18.321 0 0 0 2.805 17.588c6.37 8.141 13.367 16.04 20.995 23.694a284.685 284.685 0 0 0 22.037 19.913c6.026 4.9 14.499 5.617 21.283 1.799l13.802-7.769a19.03 19.03 0 0 1 12.175-2.223l13.606 2.061c13.89 2.104 24.143 13.885 24.143 27.738v34.41c0 16.084-13.226 29.124-29.541 29.124-1.618 0-3.232-.131-4.828-.392-32.836-5.363-67.928-25.976-105.491-61.57-39.13-37.08-63.447-75.668-72.727-115.77C18.449 41.253 32 21.333 50.879 21.333z" class="transform-group"></path></svg>
        </span>
        <span>电话预定</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="footer-icon">
          <svg viewBox="0 0 256 256"><path d="M120 174.4V29.333c0-4.266 3.733-8 8-8s8 3.734 8 8V174.4l50.133-49.6c3.2-3.2 8-3.2 11.2 0 3.2 3.2 3.2 8 0 11.2L140.8 191.467c-7.467 6.933-18.667 6.933-26.133 0L58.133 136c-3.2-3.2-3.2-8 0-11.2 3.2-3.2 8-3.2 11.2 0L120 174.4zm90.667 33.6c4.266 0 8 3.733 8 8s-3.734 8-8 8H45.333c-4.266 0-8-3.733-8-8s3.734-8 8-8h165.334z" class="transform-group"></path></svg>
        </span>
        <span>下载客户端</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="footer-icon">
          <svg viewBox="0 0 256 256"><path d="M128 229.333c55.965 0 101.333-45.368 101.333-101.333 0-55.965-45.368-101.333-101.333-101.333C72.035 26.667 26.667 72.035 26.667 128c0 55.965 45.368 101.333 101.333 101.333zm0 16c-64.802 0-117.333-52.532-117.333-117.333C10.667 63.198 63.199 10.667 128 10.667c64.802 0 117.333 52.531 117.333 117.333 0 64.802-52.531 117.333-117.333 117.333zM99.61 138.517c-8.76-7.814-14.277-19.188-14.277-31.85C85.333 83.102 104.436 64 128 64s42.667 19.102 42.667 42.667c0 12.662-5.516 24.036-14.276 31.85C186.559 149.971 208 179.148 208 213.333l-.001.501c-20.959 19.542-49.083 31.5-79.999 31.5-30.916 0-59.04-11.958-79.999-31.5a83.522 83.522 0 0 1-.001-.5c0-34.186 21.442-63.363 51.61-74.817zM128 229.333c23.565 0 45.833-8.059 63.674-22.497-3.256-32.295-30.521-57.503-63.674-57.503s-60.418 25.208-63.674 57.503c17.84 14.438 40.11 22.497 63.674 22.497zm0-96c14.727 0 26.667-11.939 26.667-26.666C154.667 91.939 142.727 80 128 80c-14.728 0-26.667 11.939-26.667 26.667 0 14.727 11.94 26.666 26.667 26.666z" class="transform-group"></path></svg>
        </span>
        <span>我的</span>
      </a>
    </li>
  </ul>
  <script src="js/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      //播放速度
      loop: true,
      // 自动播放时间
      autoplay:true,
      // 播放的速度
      speed:1000,
      //小圆点
      pagination: {
        el: '.swiper-pagination',
      },
      // 这样，即使我们滑动之后， 定时器也不会被清除
      autoplayDisableOnInteraction : false
    });
  </script>
</body>
</html>